<template>
    <NavBar>
        <div slot="left" v-on:click="backHome">
            <img src="~assets/img/common/back.svg" alt="">
        </div>
        <div slot="center" class="title">
        <span v-for="(item,index) in titles" v-bind:key="index" v-on:click="enableAlive(index)" :class="{active:currentIndex===index}">
            {{item}}
        </span>
        </div>
    </NavBar>
</template>
<script>
import NavBar from "@/components/common/navbar/NavBar";
export default {
    name: "GoodsNavBar",
    data(){
        return{
            titles:['商品','参数','评论','推荐'],
            currentIndex:0
        }
    },
    methods:{
        enableAlive(index){
            this.currentIndex=index
            this.$emit('NavBarIndex',index)
        },
        backHome(){
            this.$router.back()
        }
    },
    components:{
        NavBar
    }
}
</script>
<style scoped>
img{
    padding-top: 12px;
}
.title{
    padding-top: 10px;
}
span{
    font-size: 12px;
    display: inline-block;
    margin: 0 10px;
    padding-bottom: 3px;
}
.active{
    border-bottom: 2px solid red;
    color: red;
}
</style>
